<template>
  <div class="ei_record elm-edit" v-if="model">
      <el-tabs v-model="activeName" v-loading="loading" type="card">
        <el-tab-pane label="信息" name="1">
          <el-card  shadow="hover">
            <div slot="header">
              <span>项目信息</span>
            </div>
            <el-form ref="model" :model="model" size="small" label-width="120px">
              <elm-row>
                <el-form-item label="项目编号">
                  {{model.sys_code_key}}
                </el-form-item>
                <el-form-item label="名称">
                  {{model.name}}
                </el-form-item>
              </elm-row>
              <elm-row>
                <el-form-item label="项目类型">
                  {{model.type_mc}}
                </el-form-item>
                <el-form-item label="项目资金">
                  {{model.money?(model.money+"万元"):""}}
                </el-form-item>
              </elm-row>
              <elm-row>
                <el-form-item label="所属部门">
                  {{model.org_mc}}
                </el-form-item>
                <el-form-item label="项目经理">
                  {{ model.manager_mc }}
                </el-form-item>
              </elm-row>
              <elm-row>
                <el-form-item label="开工日期">
                  {{ model.b_sdate }}
                </el-form-item>
                <el-form-item label="承揽人">
                  {{ model.saler_mc }}
                </el-form-item>
              </elm-row>
              <elm-row>
                <el-form-item label="订单编号">
                  {{ model.order_key }}
                </el-form-item>
                <el-form-item label="登记人" prop="manager">
                  {{ model.booker_mc }}
                </el-form-item>
              </elm-row>
              <elm-row>
                <el-form-item label="合同编号">
                  {{ model.contract_key }}
                </el-form-item>
                <el-form-item></el-form-item>
              </elm-row>
              <el-form-item label="项目概要">
                {{ model.description }}
              </el-form-item>
              <el-form-item label="备注">
                {{ model.remark }}
              </el-form-item>
            </el-form>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="进度" name="2">
          <el-card shadow="hover" class="pj_stage">
            <div slot="header">
              <span>运行节点</span>
            </div>
            <div v-if="model.id" style=" height: calc(80vh - 110px)">
              <elm-page-lr width="200px">
                <template #left>
                  <elm-page-tb style="padding: 0px;" :splite="false" :splite-show="false" :top-show="false" height="0px">
                    <elm-table-tree ref="tree" url="/business/pmis/pj/show/GetInsStageData" :post-data="{ pj_id:model.id }"
                                    :show-header="false" style="user-select:none;" @change="loadData" :show-index="false"
                                    @row-click="rowClick" :default-expand-all="true" height="100%" :page-size="9999">
                      <el-table-column>
                        <template v-slot="scope">
                          <template v-if="scope.row.children">
                            <i class="el-icon-folder-opened" style="color:#0094ff;"></i>
                          </template>
                          <template v-else>
                            <i class="el-icon-tickets" style="color:#0094ff;"></i>
                          </template>
                          {{ scope.row.name }}
                          <span class="stage-state active" v-if="scope.row.end_time"><i class="el-icon-success"></i></span>
                          <span class="stage-state" v-else><i class="el-icon-success"></i></span>
                        </template>
                      </el-table-column>
                    </elm-table-tree>
                  </elm-page-tb>
                </template>
                <div>
                  <el-form  size="small" label-width="100px">
                    <div v-for="(item, index) in ins_stages" :key="index" v-if="item.id == postData.ins_stage_id">
                      <elm-table url="/business/pmis/pj/show/GetTaskByStage" :post-data="{stage:item.id}" style="height:calc(80vh - 110px) " width="100%">
                        <el-table-column prop="assignee_mc" label="负责人" align="center" width="100px"></el-table-column>
                        <el-table-column prop="name" label="工作名称" align="center"></el-table-column>
                        <el-table-column prop="jh_start_time" :formatter="formatDateTime" label="计划开始时间" align="center" width="180px"></el-table-column>
                        <el-table-column prop="jh_end_time" :formatter="formatDateTime" label="计划结束时间" align="center" width="180px"></el-table-column>
                        <el-table-column prop="priority" label="优先级" align="center" width="80px"></el-table-column>
                        <el-table-column prop="status" label="状态" align="center" width="80px"></el-table-column>
                      </elm-table>
                    </div>
                  </el-form>
                </div>
              </elm-page-lr>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="人员" name="3">
          <el-card  shadow="hover">
            <div slot="header">
              <span>人员信息</span>
            </div>
            <el-form ref="contracts" size="small" label-width="130px">
              <elm-row>
                <el-form-item label="项目经理">
                  <el-tag style="margin: 3px" :disable-transitions="true">
                    {{model.manager_mc}}
                  </el-tag>
                </el-form-item>
                <el-form-item></el-form-item>
              </elm-row>
              <elm-row>
                <el-form-item label="项目成员">
                  <el-tag v-for="worker in workers" style="margin: 3px" :disable-transitions="true">
                    {{worker}}
                  </el-tag>
                </el-form-item>
              </elm-row>
            </el-form>
          </el-card>
          <el-card  shadow="hover">
            <div slot="header">
              <span>成员工作</span>
            </div>
            <elm-table :data="tasks" style="height: calc(78vh - 240px)" width="100%" :span-method="spanMethod" :index="getSerialNumber">
              <el-table-column prop="assignee_mc" label="负责人" align="center" width="100px"></el-table-column>
              <el-table-column prop="name" label="工作名称" align="center"></el-table-column>
              <el-table-column prop="jh_start_time" :formatter="formatDateTime" label="计划开始时间" align="center" width="180px"></el-table-column>
              <el-table-column prop="jh_end_time" :formatter="formatDateTime" label="计划结束时间" align="center" width="180px"></el-table-column>
              <el-table-column prop="priority" label="优先级" align="center" width="80px"></el-table-column>
              <el-table-column prop="status" label="状态" align="center" width="80px"></el-table-column>
            </elm-table>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="费用" name="4">
          <el-card  shadow="hover" style="height: calc(100% - 20px)">
            <div slot="header">
              <span>费用月表</span>
            </div>
            <elm-table :data="expense" style="height:calc(80vh - 110px)" width="100%" :show-index="false" :page-size="9999">
              <el-table-column prop="name" label="费用用途" width="100px" align="center"></el-table-column>
              <el-table-column prop="m0" label="1月" align="center">
                <template v-slot="scope">
                  <elm-open-button url="/business/pmis/pj_show_expense" width="70%" height="60%" title="费用详情" type="text"
                                   :data="{type:scope.row.type,id:model.sys_code_key,month:1}">
                    <div>{{scope.row.m0==0?"":scope.row.m0 + "元" }}</div>
                  </elm-open-button>
                </template>
              </el-table-column>
              <el-table-column prop="m1" label="2月" align="center">
                <template v-slot="scope">
                  <elm-open-button url="/business/pmis/pj_show_expense" width="70%" height="60%" title="费用详情" type="text"
                                   :data="{type:scope.row.type,id:model.sys_code_key,month:2}">
                    <div>{{scope.row.m1==0?"":scope.row.m1 + "元" }}</div>
                  </elm-open-button>
                </template>
              </el-table-column>
              <el-table-column prop="m2" label="3月" align="center">
                <template v-slot="scope">
                  <elm-open-button url="/business/pmis/pj_show_expense" width="70%" height="60%" title="费用详情" type="text"
                                   :data="{type:scope.row.type,id:model.sys_code_key,month:3}">
                    <div>{{scope.row.m2==0?"":scope.row.m2 + "元" }}</div>
                  </elm-open-button>
                </template>
              </el-table-column>
              <el-table-column prop="m3" label="4月" align="center">
                <template v-slot="scope">
                  <elm-open-button url="/business/pmis/pj_show_expense" width="70%" height="60%" title="费用详情" type="text"
                                   :data="{type:scope.row.type,id:model.sys_code_key,month:4}">
                    <div>{{scope.row.m3==0?"":scope.row.m3 + "元" }}</div>
                  </elm-open-button>
                </template>
              </el-table-column>
              <el-table-column prop="m4" label="5月" align="center">
                <template v-slot="scope">
                  <elm-open-button url="/business/pmis/pj_show_expense" width="70%" height="60%" title="费用详情" type="text"
                                   :data="{type:scope.row.type,id:model.sys_code_key,month:5}">
                    <div>{{scope.row.m4==0?"":scope.row.m4 + "元" }}</div>
                  </elm-open-button>
                </template>
              </el-table-column>
              <el-table-column prop="m5" label="6月" align="center">
                <template v-slot="scope">
                  <elm-open-button url="/business/pmis/pj_show_expense" width="70%" height="60%" title="费用详情" type="text"
                                   :data="{type:scope.row.type,id:model.sys_code_key,month:6}">
                    <div>{{scope.row.m5==0?"":scope.row.m5 + "元" }}</div>
                  </elm-open-button>
                </template>
              </el-table-column>
              <el-table-column prop="m6" label="7月" align="center">
                <template v-slot="scope">
                  <elm-open-button url="/business/pmis/pj_show_expense" width="70%" height="60%" title="费用详情" type="text"
                                   :data="{type:scope.row.type,id:model.sys_code_key,month:7}">
                    <div>{{scope.row.m6==0?"":scope.row.m6 + "元" }}</div>
                  </elm-open-button>
                </template>
              </el-table-column>
              <el-table-column prop="m7" label="8月" align="center">
                <template v-slot="scope">
                  <elm-open-button url="/business/pmis/pj_show_expense" width="70%" height="60%" title="费用详情" type="text"
                                   :data="{type:scope.row.type,id:model.sys_code_key,month:8}">
                    <div>{{scope.row.m7==0?"":scope.row.m7 + "元" }}</div>
                  </elm-open-button>
                </template>
              </el-table-column>
              <el-table-column prop="m8" label="9月" align="center">
                <template v-slot="scope">
                  <elm-open-button url="/business/pmis/pj_show_expense" width="70%" height="60%" title="费用详情" type="text"
                                   :data="{type:scope.row.type,id:model.sys_code_key,month:9}">
                    <div>{{scope.row.m8==0?"":scope.row.m8 + "元" }}</div>
                  </elm-open-button>
                </template>
              </el-table-column>
              <el-table-column prop="m9" label="10月" align="center">
                <template v-slot="scope">
                  <elm-open-button url="/business/pmis/pj_show_expense" width="70%" height="60%" title="费用详情" type="text"
                                   :data="{type:scope.row.type,id:model.sys_code_key,month:10}">
                    <div>{{scope.row.m9==0?"":scope.row.m9 + "元" }}</div>
                  </elm-open-button>
                </template>
              </el-table-column>
              <el-table-column prop="m10" label="11月" align="center">
                <template v-slot="scope">
                  <elm-open-button url="/business/pmis/pj_show_expense" width="70%" height="60%" title="费用详情" type="text"
                                   :data="{type:scope.row.type,id:model.sys_code_key,month:11}">
                    <div>{{scope.row.m10==0?"":scope.row.m10 + "元" }}</div>
                  </elm-open-button>
                </template>
              </el-table-column>
              <el-table-column prop="m11" label="12月" align="center">
                <template v-slot="scope">
                  <elm-open-button url="/business/pmis/pj_show_expense" width="70%" height="60%" title="费用详情" type="text"
                                   :data="{type:scope.row.type,id:model.sys_code_key,month:12}">
                    <div>{{scope.row.m11==0?"":scope.row.m11 + "元" }}</div>
                  </elm-open-button>
                </template>
              </el-table-column>
              <el-table-column prop="past" label="往年" align="center">
                <template v-slot="scope">
                  <elm-open-button url="/business/pmis/pj_show_expense" width="70%" height="60%" title="费用详情" type="text"
                                   :data="{type:scope.row.type,id:model.sys_code_key,month:'past'}">
                    <div>{{scope.row.past==0?"":scope.row.past + "元" }}</div>
                  </elm-open-button>
                </template>
              </el-table-column>
              <el-table-column prop="total" label="总计" align="center">
                <template v-slot="scope">
                  <elm-open-button url="/business/pmis/pj_show_expense" width="70%" height="60%" title="费用详情" type="text"
                                   :data="{type:scope.row.type,id:model.sys_code_key,month:'total'}">
                    <div>{{scope.row.total==0?"":scope.row.total + "元" }}</div>
                  </elm-open-button>
                </template>
              </el-table-column>
            </elm-table>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="合同" name="5">
          <el-card  shadow="hover" v-for="item in contracts">
            <div slot="header">
              <span>合同信息——{{item.contract_name}}</span>
            </div>
            <el-form ref="contracts" :model="item" size="small" label-width="130px">
              <elm-row>
                <el-form-item label="合同编号" prop="sys_code_key">
                  {{ item.sys_code_key }}
                </el-form-item>
                <el-form-item label="合同名称" prop="contract_name">
                  {{ item.contract_name }}
                </el-form-item>
              </elm-row>
              <elm-row>
                <el-form-item label="合同金额(含税)" prop="amount">
                  {{ item.amount?(item.amount + "万元"):"" }}
                </el-form-item>
                <el-form-item label="税率" prop="tax_rate">
                  {{ item.tax_rate?(item.tax_rate + "%"):"" }}
                </el-form-item>
              </elm-row>
              <elm-row>
                <el-form-item label="合同金额(不含税)" prop="amount_notax">
                  {{ item.amount_notax?(item.amount_notax+"万元"):"" }}
                </el-form-item>
                <el-form-item label="合同类型" prop="contract_type">
                  {{ item.contract_type }}
                </el-form-item>
              </elm-row>
              <elm-row>
                <el-form-item label="签订日期" prop="contract_date">
                  {{ item.contract_date }}
                </el-form-item>
                <el-form-item label="合同状态" prop="status">
                  {{ item.status }}
                </el-form-item>
              </elm-row>
              <elm-row>
                <el-form-item label="生效日期" prop="start_date">
                  {{ item.start_date }}
                </el-form-item>
                <el-form-item label="截止日期" prop="end_date">
                  {{ item.end_date }}
                </el-form-item>
              </elm-row>
              <elm-row>
                <el-form-item label="负责人" prop="charge_person">
                  {{ item.charge_person_mc }}
                </el-form-item>
                <el-form-item label="所属部门" prop="org_id">
                  {{ item.org_mc }}
                </el-form-item>
              </elm-row>
              <elm-row>
                <el-form-item label="关联线索" prop="glxs">
                  {{ item.glxs_mc }}
                </el-form-item>
                <el-form-item label="关联商机" prop="glsj">
                  {{ item.glsj_mc }}
                </el-form-item>
              </elm-row>
              <el-form-item label="附件">
                <elm-fileview module_name="biz_cmis_contract_files" :rel_id="item.id" list-type="file" tip=""></elm-fileview>
              </el-form-item>
              <el-form-item label="备注">
                {{ item.remark }}
              </el-form-item>
              <el-form-item label="甲方单位" prop="unit_a">
                {{ item.unit_a }}
              </el-form-item>
              <elm-row>
                <el-form-item label="联系人(甲)" prop="lxr_xm_a">
                  {{ item.lxr_xm_a }}
                </el-form-item>
                <el-form-item label="职务(甲)" prop="lxr_zw_a">
                  {{ item.lxr_zw_a }}
                </el-form-item>
              </elm-row>
              <elm-row>
                <el-form-item label="电话(甲)" prop="lxr_dh_a">
                  {{ item.lxr_dh_a }}
                </el-form-item>
                <el-form-item label="邮箱(甲)" prop="lxr_yx_a">
                  {{ item.lxr_yx_a }}
                </el-form-item>
              </elm-row>
              <el-form-item label="乙方单位" prop="unit_b">
                {{ item.unit_b }}
              </el-form-item>
              <elm-row>
                <el-form-item label="联系人(乙)" prop="lxr_xm_b">
                  {{ item.lxr_xm_b }}
                </el-form-item>
                <el-form-item label="职务(乙)" prop="lxr_zw_b">
                  {{ item.lxr_zw_b }}
                </el-form-item>
              </elm-row>
              <elm-row>
                <el-form-item label="电话(乙)" prop="lxr_dh_b">
                  {{ item.lxr_dh_b }}
                </el-form-item>
                <el-form-item label="邮箱(乙)" prop="lxr_yx_b">
                  {{ item.lxr_yx_b }}
                </el-form-item>
              </elm-row>
            </el-form>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="客户" name="6">
          <el-card  shadow="hover">
            <div slot="header">
              <span>客户信息</span>
            </div>
            <el-form size="small" label-width="120px">
              <elm-row>
                <el-form-item label="委托单位">
                  {{ model.a_org }}
                </el-form-item>
                <el-form-item label="委托日期">
                  {{ model.a_date }}
                </el-form-item>
              </elm-row>
              <elm-row>
                <el-form-item label="联系人">
                  {{ model.a_user }}
                </el-form-item>
                <el-form-item label="联系方式">
                  {{ model.a_user_call }}
                </el-form-item>
              </elm-row>
              <el-form-item label="备注及要求">
                {{ model.a_remark }}
              </el-form-item>
            </el-form>
          </el-card>
        </el-tab-pane>
      </el-tabs>
  </div>
</template>
<script>
export default {
  extends: elmVueBase,
  data() {
    return {
      loading:false,
      activeName:"1",
      postData: {ins_stage_id: null, name: null},
      model:{},
      contracts:[],
      tasks:[],
      workers:[],
      expense:[],
      ins_stages: [],
      pj_stages:[]
    }
  },
  async created() {
    await this.getData();
  },
  methods: {
    async getData(){
      this.loading=true;
      //await this.getPjData();
      await this.getContData();
      await this.getTaskData();
      await this.getExpenseData();
      this.loading=false;
    },
    async getPjData(){
      var res= await elm.post("/business/pmis/pj/show/GetData",{pj_id:this.model.id});
      if(res.pagedata.length>0)
        this.model=res.pagedata[0];
    },
    async getContData(){
      var res1 =await elm.post("business/pmis/pj/show/GetContData",{sys_code_key:this.model.contract_key?this.model.contract_key:""});
      var res2 =await elm.post("business/pmis/pj/show/GetContZcData",{glxm:this.model.sys_code_key});
      this.contracts = [...res1,...res2];
    },
    async getTaskData(){
      this.tasks = await elm.post("business/pmis/pj/show/GetTaskData",{pj_id:this.model.id});
      this.workers=[];
      for (var i = 0; i < this.tasks.length; i++) {
        if (!this.workers.includes(this.tasks[i].assignee_mc)) {
          this.workers.push(this.tasks[i].assignee_mc);
        }
      }
    },
    async getExpenseData(){
      var now_year=new Date().getFullYear();
      var cost_type= await elm.post("/business/pmis/pj/show/GetCostType",{})
      this.expense=[];
      var res = await elm.post("/business/pmis/pj/show/GetCostList",{pj_id:this.model.sys_code_key});
      var cost={};
      var total={past:0,total:0,name:"总计"};
      for(var i=0;i<12;i++)total["m"+i.toString()]=0;
      for(var i=0;i<cost_type.length;i++){
        var type=cost_type[i].name.toString();
        var item={type:type,past:0,total:0,name:cost_type[i].name};
        for(var j=0;j<12;j++) {
          item["m"+j.toString()]=0
        }
        cost[type]=item;
      }
      for(var k=0;k<res.length;k++)
      {
        var type=res[k].item_type.toString();
        cost[type]['total']+=res[k].cost_amount;
        total['total']+=res[k].cost_amount;
        if(now_year==new Date(res[k].sys_createtime).getFullYear()){
          var month=new Date(res[k].sys_createtime).getMonth();
          cost[type]["m"+month.toString()]+=res[k].cost_amount;
          total["m"+month.toString()]+=res[k].cost_amount;
        }
        else{
          cost[type]['past']+=res[k].cost_amount;
          total['past']+=res[k].cost_amount;
        }
      }
      for(var item in cost)
        this.expense.push(cost[item]);
      this.expense.push(total);
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
      // 仅对“负责人”和“序号”列进行合并
      if (columnIndex === 1) { // 针对“负责人”列（assignee_mc列）和“序号”列
        let rowspan = 1;
        let colspan = 1;

        // 如果是第一行或者当前行的assignee_mc和上一行不同，则合并
        if (rowIndex > 0 && row.assignee_mc === this.tasks[rowIndex - 1].assignee_mc) {
          rowspan = 0;  // 当前行不显示
        } else {
          // 统计下方相同值的行数，设置rowspan
          for (let i = rowIndex + 1; i < this.tasks.length; i++) {
            if (this.tasks[i].assignee_mc === row.assignee_mc) {
              rowspan++;
            } else {
              break;
            }
          }
        }

        return { rowspan, colspan };
      }

      // 对其他列（如工作名称、计划开始时间等）默认不做合并
      return { rowspan: 1, colspan: 1 };
    },
    getSerialNumber(rowIndex) {
      let serial = rowIndex + 1; // 默认序号从1开始
      // 检查上一行的assignee_mc，判断是否合并
      for (let i = rowIndex - 1; i >= 0; i--) {
        if (this.tasks[i].assignee_mc !== this.tasks[rowIndex].assignee_mc) {
          break; // 一旦发现不相同，就停止调整序号
        }
        serial--; // 如果合并，序号保持不变
      }
      return serial;
    },
    loadData() {
      let treeList = this.$refs['tree'].datalist;
      if(treeList.length>0){
        this.ins_stages = elm.handleTreeToList(treeList);
        this.postData.ins_stage_id = this.ins_stages[0].id;
        this.postData.name = this.ins_stages[0].name;
      }
      else {
        this.ins_stages=[];
        this.postData=[];
      }
    },
    rowClick(row) {
      this.postData.ins_stage_id = row.id;
      //this.tablebinding('tree');
    },
  }
}
</script>
<style>
.ei_record .el-tabs
{
  background-color: #fff;
  border-radius: 6px;
}
.ei_record .el-tabs__nav
{
  margin-left: 15px;
}
.ei_record .el-tabs__header {
  margin: 0px;
}
.ei_record .el-tabs
{
  position:absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  top: 0px;
}
.ei_record .el-tabs__content
{
  position:absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  top: 40px;
  overflow: auto;
}
.ei_record .el-tab-pane
{
  overflow: auto;
}
.ei_record .el-tag {
  height: auto;
  white-space: normal;
  background-color: transparent;
  color: #333;
  border-color: #DBDBDB;
}
.ei_record .el-card__body .el-form:last-child{
  margin-bottom:0px !important;
}
.ei_record .el-tabs__item.is-active {
  color: #409eff; /* 选中页签的文本颜色 */
  background-color: #f5f7fa; /* 选中页签的背景色 */
}
</style>

<style>
.pj_stage .elm-page-bottom {
  padding: 0px !important;
  min-height: calc(100% - 2px) !important;
}

.pj_stage.elm-edit .yxjd .el-card__body {
  height: calc(100% - 52px);
}
.pj_stage .elm-fy .elm-body {
  padding: 0px 7px !important;
}
.pj_stage .elm-page-lr
{
  top:5px !important;
  left: 5px !important;
  right: 5px !important;
  bottom: 5px !important;
}
.pj_stage > .elm-fy > .elm-body > .el-card {
  margin: 7px 0px 0px;
}
</style>

<style scoped>

.stage-state {
  color: #c0c4cc;
  margin-left: auto;
}

.stage-state.active {
  color: #67c23a;
}
</style>